<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .header-main{
            width: 100%;
            height: 60px;
            background-color: darkgoldenrod;
            top: 0;
        }

        .bottom{
            position: fixed;
            height: 100px;
            background-color: darkcyan;
            bottom: 0;

        }
    </style>
</head>
<body>
    <div id="app">
    
</div>
<script>
    
    let demo ={
        template:`
        <div>
            <h2 class="header-main">{{ str }}</h2>
        </div>
    `,
    data(){
        return{
            str:'我是头部'
        }
    }
} 
    let bottomFooter = {
        template:`
        <div>
            <h2 class="bottom">我是尾部</h2>    
        </div>
        `,
        
    }
    let App={
            template:`
            <div>
                <aaa>
                <bbb></bbb>
            </div>
        `,
        data(){
            return{}
        },
        components:{ 'aaa':demo, 'bbb':bottomFooter }//如果是局部组件 需要声明使用哪个组件
    }
    new Vue({
        render: h => h(App)
    }).$mount("#app")
</script>
</body>
</html>